import React from 'react'
import { Menu } from 'antd'
import type { MenuProps } from 'antd'
import { Link } from '@tanstack/react-router'

export interface SidebarMenuProps {
  items: any[]
  selectedKeys: string[]
}

const SidebarMenu: React.FC<SidebarMenuProps> = ({ items, selectedKeys }) => {
  // 转换菜单项以包含链接
  const convertItems = (items: any[]): MenuProps['items'] => {
    return items.map(item => {
      const convertedItem: any = {
        ...item,
        label: item.path ? <Link to={item.path}>{item.label}</Link> : item.label
      }
      
      if (item.children) {
        convertedItem.children = convertItems(item.children)
      }
      
      return convertedItem
    })
  }
  
  const convertedItems = convertItems(items)

  return (
    <Menu 
      theme="dark" 
      mode="inline" 
      items={convertedItems}
      selectedKeys={selectedKeys}
    />
  )
}

export default SidebarMenu